<template>
    <div class="app-container">
        <el-row>
            <el-button type="danger" round @click="backFn">返回</el-button>
        </el-row>
        <el-table v-loading="listLoading" ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="id" label="派单编号" > </el-table-column>
            <el-table-column prop="add_time" label="派单时间" > </el-table-column>
            <el-table-column prop="finish_time" label="结单时间" > </el-table-column>
            <el-table-column prop="status"  label="状态" >

                <template slot-scope="scope">
                    <p style="color:#409EFF">{{scope.row.status === 1 ? "派单中" : ""}}</p>
                    <p style="color:#67C23A">{{scope.row.status === 2 ? "结单" : ""}}</p>
                    <p style="color:#F56C6C">{{scope.row.status === 3 ? "弃单" : ""}}</p>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="time_num" label="花费时长" > </el-table-column> -->
            <el-table-column prop="user_code" label="用户编号" > </el-table-column>
            <el-table-column prop="nickname" label="用户昵称" > </el-table-column>
            <el-table-column prop="order_num" label="订单总量" > </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button
                    @click="getDialogList(scope.row.id)"
                    type="text"
                    size="small">
                    查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage" @pagination="getList"/>

        <!-- 点击查看详情的弹出框 -->
        <el-dialog title="详细信息" :visible.sync="detailDialogVisible" >
            <el-table v-loading="dialogLoading" ref="dataList2" :data="gridData" style="margin-bottom: 20px;" row-key="id" border>
                <el-table-column prop="add_time" label="下单时间" > </el-table-column>
                <el-table-column prop="user_code" label="下单人编号" > </el-table-column>
                <el-table-column prop="user_name" label="下单人昵称" > </el-table-column>
                <el-table-column prop="u_code" label="大神编号" > </el-table-column>
                <el-table-column prop="u_name" label="大神昵称" > </el-table-column>
                <el-table-column prop="status" label="订单状态" >
                    <template slot-scope="scope">
                        <p>{{scope.row.status === 1?'待接单':''}}</p>
                        <p style="color:#f0d695">{{scope.row.status === 2?'已取消':''}}</p>
                        <p style="color:#F56C6C">{{scope.row.status === 3?'已拒绝':''}}</p>
                        <p>{{scope.row.status === 4?'服务中':''}}</p>
                        <p>{{scope.row.status === 5?'服务完成':''}}</p>
                        <p style="color:#67C23A">{{scope.row.status === 6?'已结算':''}}</p>
                        <p>{{scope.row.status === 7?'申诉中':''}}</p>
                        <p>{{scope.row.status === 8?'申请退款中':''}}</p>
                        <p style="color:#409EFF">{{scope.row.status === 9?'成功退款':''}}</p>
                        <p>{{scope.row.status === 10?'拒绝退款':''}}</p>
                        <p></p>
                    </template>
                </el-table-column>
                <el-table-column prop="order_num" label="订单量" > </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import {
    listData,
    listDialogData
} from '@/api/sendOrders/sendOrdersRoomData'

export default {
    data(){
        return {
            listLoading:true,
            dialogLoading:true,
            menuList:[],
            total:0,
            listQuery: {
                page: 1,
                perPage: 10,
            },
            detailDialogVisible:false,
            gridData: []
        }
    },
    created(){
        this.getList()
    },
    methods: {
        getList(){
            this.listLoading = true
            let urlData = "?"
            if (this.listQuery.page) {
                urlData = urlData + `page=${this.listQuery.page}&`;
            }
            if (this.listQuery.perPage) {
                urlData = urlData + `perPage=${this.listQuery.perPage}`;
            }
            for(let key in this.$route.query){
                urlData += `&${key}=${this.$route.query[key]}`
            }
            // urlData)
            listData(urlData).then(response => {
                // response)
                this.menuList = response.data.list;
                this.total = response.data.meta.total;
                this.listLoading = false;
            })
        },
        getDialogList(id){
            this.detailDialogVisible = true;
            this.dialogLoading = true;
            let urlData = `?id=${id}`
            listDialogData(urlData).then(response => {
                this.gridData = response.data;
                // this.gridData)
                this.dialogLoading = false
            })
        },
        backFn(){
            this.$router.push({ path: '/sendOrders/sendOrdersData' })
        }
    }
}
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }

    .el-row .el-button {
        float: right;
    }

    /deep/.el-dialog {
        min-width: 610px;
    }
</style>
